import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

// 1. 定义一个初始的，不含任何数据的 state 对象
// 这个对象中，只有结构，没有真正的数据
// 今后，要新增全局共享的数据，只需要挂载到 initState 对象中即可
let initState = {
  // tokenInfo 对象的格式为 { token, refresh_token }
  tokenInfo: {
    token: '',
    refresh_token: ''
  }
}

// 从 localStorage 中读取本地的数据
const stateStr = localStorage.getItem('state')
// 2. 判断 stateStr 是否为 null
if (stateStr !== null) {
  // 如果 stateStr 有值，则以 stateStr 的值为准
  initState = JSON.parse(stateStr)
}

export default new Vuex.Store({
  // state 的值会有两种情况：
  // 1. 它的值是从 localStorage 中读出来的
  // 2. localStorage 中没有值，state 的值应该是初始值
  state: initState,
  mutations: {
    // 专门用来修改 tokenInfo 的方法
    // payload 的格式为 { token, refresh_token }
    // 在组件中调用 Mutation 方法有两种方式：
    // this.$store.commit('方法名', 参数)
    // ...mapMutations(['updateTokenInfo'])
    updateTokenInfo(state, payload) {
      state.tokenInfo = payload

      // 把 修改过后的 state 数据源持久化存储到 localStorage
      localStorage.setItem('state', JSON.stringify(state))
    }
  },
  actions: {},
  // 今后的人资后台管理项目，会大量使用 vuex 中的模块
  // 现阶段，我们刚入手 vuex，就不拆模块了
  modules: {}
})
